<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>TA的更多文章</title>
</head>


<!--<script type="text/javascript" src="/addons/longbing_card/core/public/js/jquery.min.js" ></script>-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    function navigateTo(obj) {
        let id = $(obj).attr("data-id");
        let tmp_result = '{$article_url|raw}';
        tmp_result = tmp_result + `&id=` + id;
        console.log(tmp_result, "navigateTo")
        window.open(tmp_result, "_top");
    }


    let ajax_url = '{$list_api|raw}';
    console.log(ajax_url)
    let ajax_to_uid = '{$to_uid}';
    getList(1);
    let page = 2;
    $(window).scroll(function () {
        if (!$('.loading').hasClass('hide')) {
            return;
        }
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 400) {
            console.log(page, "判断是否滑动到页面底部 page")
            getList(page);
        }
    });

    function getList(page) {
        $('.loading').removeClass('hide');
        $.ajax({
            type: 'post',
            url: ajax_url,
            dataType: 'json',
            data: {
                'page': page,
                'to_uid': ajax_to_uid,
            },
            success: function (data) {
                console.log(data, "**********success data")
                let { current_page, last_page, total } = data.data;
                let list = data.data.data;
                var html = '';
                if (list.length > 0) {
                    for (var i in list) {
                        html += '<div onclick="navigateTo(this)" data-id="' + list[i].id + '" class="article-child flex-center b-1px-b">';
                        html += '<img class="article-img bg-f4f6f8 br-5" src="' + list[i].cover + '" mode="aspectFill"/>';
                        html += '<div class="flex-1 ml-lg">';
                        html += '<div class="c-title clamp2 article-title">';
                        html += list[i].title;
                        html += '</div>';
                        html += '<div class="flex mt-sm" style="max-width:520px;">';
                        html += '<div class="f-caption c-caption ellipsis">';
                        html += list[i].classify_title;
                        html += '</div>';
                        html += '</div>';
                        html += '</div>';
                        html += '</div>';
                    }
                    $('.article-list').append(html);
                    $('.loading').addClass('hide');
                    page = page == 1 ? 1 : page++;
                    let tmp_loading = '';
                    if (current_page >= last_page && total > 0) {
                        tmp_loading = '没有更多了~~'
                    }
                    if (total <= 0) {
                        tmp_loading = '暂无数据'
                    }
                    if (tmp_loading.length > 0) {
                        $('.loading').removeClass('hide').html(tmp_loading);
                    }
                } else {
                    $('.loading').removeClass('hide').html('没有更多了~~');
                }
            }
        });
    }

</script>
 

<style>
* {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
    font-style: normal;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: #f6f5fa;
}
section {
    min-width: 100%;
}

.max-225 {
    max-width: 225px;
}

.max-100 {
    max-width: 100%;
}

.no-data i {
    font-size: 100px;
    color: #ee234e;
}

.detail-auth-time {
    width: 100%;
    height: 20px;
    line-height: 20px;
    display: block;
}

.detail-auth-time em {
    max-width: 50%;
}

.card-mini {
    width: 84%;
    height: auto;
    margin: 0px auto;
    padding: 10px 4%;
}

.card-mini-user-img {
    width: 50px;
    height: 50px;
}

.card-mini-qr {
    width: 80px;
    height: 80px;
}

.card-mini-btn {
    width: 65px;
    height: 32px;
    line-height: 32px;
    display: block;
    color: white;
    background: #ee234e;
}

.card-mini-qr {
    width: 85px;
    height: 85px;
    top: 20px;
    right: 20px;
}

.bg_opacity_sec {
    background: #000;
    background: rgba(0, 0, 0, 0.5);
    filter: Alpha(opacity=50);
    color: white;
    width: 100%;
    height: 100%;
    display: inline-block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 91;
}

.card-mini-show-qr {
    width: 80%;
    height: auto;
    display: inline-block;
    top: 50%;
    right: 10%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 92;
}

.show-qr-img {
    width: 80%;
    height: 80%;
    margin: 0px auto;
}

.article-child {
    padding: 15px 4%;
}

.article-img {
    width: 65px;
    height: 65px;
    display: block;
}

.article-title {
    line-height: 20px;
    height: 40px;
    font-size: 16px;
}

.article-text, .article-text i {
    color: #c8c8c8;
}

.detail-share {
    width: 100%;
    height: auto;
    bottom: 0px;
    display: block;
    padding-top: 15px;
    background: #f0f0f0;
    z-index: 91;
}

.detail-share button {
    width: 25%;
    height: auto;
    display: inline-block; /* float: left; */
    background: none;
    border-radius: 0px;
}

.detail-share button.w-33 {
    width: 33.3%;
}

.box-shadow {
    box-shadow: 0 3px 30px rgba(21, 13, 13, 0.05);
}

.fill-base {
    background: white;
}

.f-icontext {
    font-size: 12px;
}

.f-caption {
    font-size: 14px;
}

.f-paragraph {
    font-size: 15px;
}

.f-title {
    font-size: 17px;
}

.c-black {
    color: black;
}

.c-title {
    color: #333;
}

.c-caption {
    color: #888888;
}

.c-paragraph {
    color: #646464;
}

.mt-sm {
    margin-top: 2px;
}

.ml-md {
    margin-left: 6px;
}

.ml-lg {
    margin-left: 8px;
}

.space-md {
    height: 10px;
}

.space-xl {
    height: 30px;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.ellipsis {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.clamp2, .clamp3, .clamp4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.clamp2 {
    -webkit-line-clamp: 2;
}

.clamp3 {
    -webkit-line-clamp: 3;
}

.clamp4 {
    -webkit-line-clamp: 4;
}

.br-5 {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.br-10 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.br-15 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/* 箭头 */
.right-arrow {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
}

.right-arrow::after {
    display: inline-block;
    content: " ";
    height: 6px;
    width: 6px;
    border-width: 2px;
    border-color: #bbbbbb;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 6px;
    right: 4px;
}

.show {
    display: block !important;
}

.hide {
    display: none !important;
}

.bg-f4f6f8 {
    background: #f4f6f8;
}

.rel {
    position: relative;
}

.abs {
    position: absolute;
}

.fix {
    position: fixed;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc {
    text-align: center
}

.tr {
    text-align: right
}

.b-1px-t, .b-1px-b {
    position: relative;
}

.b-1px-t:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid rgba(216, 216, 216, 1);
    color: rgba(216, 216, 216, 1);
    transform-origin: 0 0;
    transform: scaley(0.5);
    box-sizing: border-box
}

.b-1px-b::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid rgba(216, 216, 216, 1);
    color: rgba(216, 216, 216, 1);
    transform-origin: 0 100%;
    transform: scaley(0.5);
    box-sizing: border-box
}

.fixed-top {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 9
}
.detail-content img {
    max-width: 100%;
} 
.no-data-img {
    width: 50px;
    height: 50px;
}
.loading {
    padding: 15px 0px;
}

.loading_more {
    display: block;
    height: 1.5em;
    width: 100%;
}

.loading_more:before {
    display: inline-block;
    vertical-align: text-bottom;
    content: ' ';
    height: 16px;
    width: 16px;
    margin-right: 6px;
    background: url(/addons/longbing_card/core/public/static/resource/loading_more.gif) no-repeat center;
    -webkit-background-size: contain;
    background-size: contain;
}

.loading_more:after {
    content: '加载更多...';
}
</style> 
        

<body>
    <!-- TA的热门文章 -->
    <div class="article-list fill-base"></div>
    <div class="loading tc f-caption c-caption hide">
        <div class="loading_more"></div>
    </div>
</body>

</html>